<template>
  <el-row v-if="data" class="game-card">
      <block v-for="(it, i) in data" :key="i">
        <el-col :span="5">
          <el-card
            class="game-card-it" 
            :body-style="{ padding: '0px' }" shadow="hover" @click="gotoDetail(it, router, axios)">
            <img
              :src="it.icon"
              class="image"
            />
            <div style="padding: 12px">
              <span>{{it.name}}</span>
            </div>
          </el-card>
        </el-col>
      </block>
    </el-row>
</template>

<script setup>
import { ref } from "vue";
import { gotoDetail } from "@/utils/action.js";
import { useRoute, useRouter } from "vue-router";
const router = ref(useRouter());

defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});


</script>

<style lang="less" scoped>
.game-card {
  display: flex;
  align-items: center;
  height: auto;
  // background: #fff;
  padding: 10px;
  justify-content: space-between;

  &-it {
    width: 228px;
    display: flex;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &:hover {
      img{
        opacity: 0.6;
      }
      span {
          color: @link-color;
        }
    }
    img {
      width: 228px;
      height: 112px;
      object-fit: cover;
    }
    span {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1D2127;
      line-height: 16px;
    }
  }
}
</style>
